<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品管理 - ubike</title>
    <link rel="stylesheet" href="../styles/styles-main.css">
    <link rel="stylesheet" href="../styles/modules.css">

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="../modules/module-loader.js"></script>
    <script src="../modules/core-modules.js"></script>
    <script>
        // 动态加载产品管理所需模块
        document.addEventListener('DOMContentLoaded', async function() {
            try {
                await moduleLoader.loadModules([
                    ['api-client', '../scripts/api-client.js'],
                    ['navbar-main', '../scripts/navbar-main.js'],
                    ['sidebar-manager', '../scripts/sidebar-manager.js'],
                    ['products', '../scripts/products.js']
                ]);
                
                // 初始化产品管理
                if (typeof ProductsManager !== 'undefined') {
                    const productsManager = new ProductsManager();
                    productsManager.init();
                }
            } catch (error) {
                console.error('模块加载失败:', error);
            }
        });
    </script>
    <style>
        /* 产品管理页面优化样式 */
        .products-container {
            padding: var(--spacing-xl);
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .products-header {
            background: var(--white);
            border-radius: var(--border-radius-lg);
            padding: var(--spacing-xl);
            margin-bottom: var(--spacing-xl);
            box-shadow: var(--shadow);
        }
        
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-lg);
            flex-wrap: wrap;
            gap: var(--spacing-md);
        }
        
        .header-title {
            font-size: var(--font-size-xl);
            font-weight: 600;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
        }
        
        .header-actions {
            display: flex;
            gap: var(--spacing-md);
            flex-wrap: wrap;
        }
        
        .search-filter-section {
            display: grid;
            grid-template-columns: 1fr auto auto;
            gap: var(--spacing-md);
            align-items: center;
        }
        
        .search-box {
            position: relative;
            max-width: 400px;
        }
        
        .search-box input {
            width: 100%;
            padding: var(--spacing-md) var(--spacing-xl);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-lg);
            font-size: var(--font-size-md);
        }
        
        .search-box button {
            position: absolute;
            right: var(--spacing-sm);
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--gray-color);
            cursor: pointer;
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: var(--spacing-xl);
            margin-bottom: var(--spacing-xl);
        }
        
        .product-card {
            background: var(--white);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }
        
        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            background: var(--light-color);
        }
        
        .product-info {
            padding: var(--spacing-lg);
        }
        
        .product-title {
            font-size: var(--font-size-lg);
            font-weight: 600;
            margin-bottom: var(--spacing-sm);
            color: var(--dark-color);
        }
        
        .product-price {
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: var(--spacing-sm);
        }
        
        .product-stats {
            display: flex;
            justify-content: space-between;
            color: var(--gray-color);
            font-size: var(--font-size-sm);
            margin-bottom: var(--spacing-md);
        }
        
        .product-actions {
            display: flex;
            gap: var(--spacing-sm);
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--spacing-sm);
            margin-top: var(--spacing-xl);
        }
        
        .empty-state {
            text-align: center;
            padding: var(--spacing-xxl);
            color: var(--gray-color);
        }
        
        .empty-state-icon {
            font-size: 48px;
            margin-bottom: var(--spacing-md);
            opacity: 0.5;
        }
        
        @media (max-width: 768px) {
            .products-container {
                padding: var(--spacing-md);
            }
            
            .header-top {
                flex-direction: column;
                align-items: stretch;
            }
            
            .search-filter-section {
                grid-template-columns: 1fr;
            }
            
            .products-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div id="navbar-container"></div>
    
    <div class="main-container">
        <div id="sidebar-container"></div>
        
        <main class="main-content">
            <div class="products-container">
                <div class="products-header">
                    <div class="header-top">
                        <h1 class="header-title">
                            🚲 自行车产品管理
                        </h1>
                        <div class="header-actions">
                            <button class="btn btn-primary" onclick="navigateToAddProduct()">
                                ➕ 添加产品
                            </button>
                            <button class="btn btn-secondary" onclick="productManager.exportProducts()">
                                📥 导出数据
                            </button>
                            <button class="btn btn-info" onclick="navigateToCategoryManager()">
                                📂 分类管理
                            </button>
                        </div>
                    </div>
                    
                    <div class="search-filter-section">
                        <div class="search-box">
                            <input type="text" id="search-input" placeholder="搜索产品名称、型号或描述...">
                            <button onclick="productManager.searchProducts()">🔍</button>
                        </div>
                        <select id="category-filter" class="form-select">
                            <option value="">所有分类</option>
                            <option value="mountain">山地自行车</option>
                            <option value="road">公路自行车</option>
                            <option value="city">城市自行车</option>
                            <option value="electric">电动自行车</option>
                        </select>
                        <select id="status-filter" class="form-select">
                            <option value="">所有状态</option>
                            <option value="active">在售</option>
                            <option value="inactive">停售</option>
                            <option value="draft">草稿</option>
                        </select>
                    </div>
                </div>
                
                <div id="products-grid" class="products-grid">
                    <!-- 产品列表将通过JavaScript动态生成 -->
                </div>
                
                <div id="pagination" class="pagination">
                    <!-- 分页控件将通过JavaScript动态生成 -->
                </div>
                
                <div id="empty-state" class="empty-state" style="display: none;">
                    <div class="empty-state-icon">🚲</div>
                    <h3>暂无产品数据</h3>
                    <p>点击"添加产品"按钮开始添加您的第一个产品</p>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 添加产品按钮直接跳转到编辑页面 -->
    <script>
        function navigateToAddProduct() {
            window.location.href = 'edit-product.html?action=add';
        }
        
        function navigateToEditProduct(productId) {
            window.location.href = `edit-product.html?action=edit&id=${productId}`;
        }
    </script>
    
    <script>
        // 初始化产品管理器
        const productManager = new BicycleProductManager();
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 确保侧边栏和导航栏已加载
            setTimeout(() => {
                if (typeof initSidebar === 'function') {
                    initSidebar();
                }
                if (typeof initNavbar === 'function') {
                    initNavbar();
                }
            }, 100);
        });
    </script>
</body>
</html>